<template>
  <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      style="width: 256px"
      mode="inline"
      @click="handleClick"
  >
    <a-sub-menu key="sub1" @titleClick="titleClick">
      <template #title>组件使用</template>
      <a-menu-item key="1">表格</a-menu-item>
      <a-menu-item key="2">表单</a-menu-item>
      <a-menu-item key="3">生成</a-menu-item>
      <a-menu-item key="4">Option 4</a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="sub2" @titleClick="titleClick">
      <template #title>IDC</template>
      <a-menu-item key="5">Option 5</a-menu-item>
      <a-menu-item key="6">Option 6</a-menu-item>
      <a-sub-menu key="sub3" title="Submenu">
        <a-menu-item key="7">Option 7</a-menu-item>
        <a-menu-item key="8">Option 8</a-menu-item>
      </a-sub-menu>
    </a-sub-menu>
  </a-menu>
</template>
<script lang="ts" setup>
import {MenuProps} from "ant-design-vue/es";
// import {
//   MailOutlined,
//   QqOutlined,
//   AppstoreOutlined,
//   SettingOutlined,
// } from "@ant-design/icons-vue";

const selectedKeys = ref<string[]>(["1"]);
const openKeys = ref<string[]>(["sub1"]);
const handleClick: MenuProps["onClick"] = (e) => {
  console.log("click", e);
};
const titleClick = (e: Event) => {
  console.log("titleClick", e);
};
watch(
    () => openKeys,
    (val) => {
      console.log("openKeys", val);
    }
);
</script>
